<template>
  <div class="qidian-home">
    <!-- 主标签导航栏 -->
    <div class="main-tabs">
      <div class="tabs-container">
        <button 
          class="main-tab" 
          :class="{ active: currentMainTab === '男生' }"
          @click="handleMainTabClick('男生')"
        >
          男生
        </button>
        <button 
          class="main-tab" 
          :class="{ active: currentMainTab === '女生' }"
          @click="handleMainTabClick('女生')"
        >
          女生
        </button>
        <button 
          class="main-tab" 
          :class="{ active: currentMainTab === '出版' }"
          @click="handleMainTabClick('出版')"
        >
          出版
        </button>
        <button 
          class="main-tab" 
          :class="{ active: currentMainTab === '听书' }"
          @click="handleMainTabClick('听书')"
        >
          听书
        </button>
      </div>
    </div>
    
    <!-- 功能标签导航 -->
    <div class="function-tabs">
      <div class="function-container">
        <button 
          class="function-tab" 
          :class="{ active: currentFunctionTab === '全部作品' }"
          @click="handleFunctionTabClick('全部作品')"
        >
          全部作品
        </button>
        <button 
          class="function-tab" 
          :class="{ active: currentFunctionTab === '排行' }"
          @click="handleFunctionTabClick('排行')"
        >
          排行
        </button>
        <button 
          class="function-tab" 
          :class="{ active: currentFunctionTab === '完本' }"
          @click="handleFunctionTabClick('完本')"
        >
          完本
        </button>
        <button 
          class="function-tab" 
          :class="{ active: currentFunctionTab === '免费' }"
          @click="handleFunctionTabClick('免费')"
        >
          免费
        </button>
        <button 
          class="function-tab" 
          :class="{ active: currentFunctionTab === '作家专区' }"
          @click="handleFunctionTabClick('作家专区')"
        >
          作家专区
        </button>
      </div>
    </div>
    
    <!-- 轮播图 -->
    <div class="banner">
      <div class="banner-content">
        <img src="https://picsum.photos/id/1/1200/400" alt="热门小说推荐" class="banner-img" />
        <div class="banner-text">
          <h2>《逆天邪神》</h2>
          <p>火星引力 著</p>
          <a href="#" class="read-btn">立即阅读</a>
        </div>
      </div>
    </div>
    
    <!-- 主要内容区域 -->
    <div class="content-container">
      <!-- 左侧区域 - 导航和榜单 -->
      <div class="left-panel">
        <!-- 左侧导航栏 -->
        <div class="left-sidebar">
          <!-- 主标签下的次级导航 -->
          <div class="secondary-nav">
            <div class="nav-group">
              <h3 class="nav-title">分类</h3>
              <div class="nav-list">
                <a href="#" class="nav-item active">玄幻</a>
                <a href="#" class="nav-item">修真</a>
                <a href="#" class="nav-item">都市</a>
                <a href="#" class="nav-item">历史</a>
                <a href="#" class="nav-item">科幻</a>
                <a href="#" class="nav-item">游戏</a>
                <a href="#" class="nav-item">悬疑</a>
                <a href="#" class="nav-item">武侠</a>
                <a href="#" class="nav-item">奇幻</a>
                <a href="#" class="nav-item">军事</a>
              </div>
            </div>
            
            <div class="nav-group">
              <h3 class="nav-title">状态</h3>
              <div class="nav-list">
                <a href="#" class="nav-item active">全部</a>
                <a href="#" class="nav-item">连载中</a>
                <a href="#" class="nav-item">已完结</a>
              </div>
            </div>
            
            <div class="nav-group">
              <h3 class="nav-title">属性</h3>
              <div class="nav-list">
                <a href="#" class="nav-item active">全部</a>
                <a href="#" class="nav-item">热血</a>
                <a href="#" class="nav-item">搞笑</a>
                <a href="#" class="nav-item">冒险</a>
                <a href="#" class="nav-item">玄幻</a>
                <a href="#" class="nav-item">修真</a>
              </div>
            </div>
            
            <div class="nav-group">
              <h3 class="nav-title">字数</h3>
              <div class="nav-list">
                <a href="#" class="nav-item active">全部</a>
                <a href="#" class="nav-item">50万以下</a>
                <a href="#" class="nav-item">50-100万</a>
                <a href="#" class="nav-item">100-300万</a>
                <a href="#" class="nav-item">300万以上</a>
              </div>
            </div>
            
            <div class="nav-group">
              <h3 class="nav-title">品质</h3>
              <div class="nav-list">
                <a href="#" class="nav-item active">全部</a>
                <a href="#" class="nav-item">精品</a>
                <a href="#" class="nav-item">VIP</a>
                <a href="#" class="nav-item">签约</a>
              </div>
            </div>
          </div>
        </div>
        <!-- 热门榜单 -->
        <div class="rank-section">
          <div class="section-header">
            <h3>热门榜单</h3>
          </div>
          <div class="rank-list">
            <div class="rank-item top-rank">
              <span class="rank-num first">1</span>
              <div class="rank-info">
                <h4>《斗破苍穹》</h4>
                <p>天蚕土豆 著</p>
                <span class="rank-stats">玄幻 · 连载中</span>
              </div>
            </div>
            <div class="rank-item top-rank">
              <span class="rank-num second">2</span>
              <div class="rank-info">
                <h4>《庆余年》</h4>
                <p>猫腻 著</p>
                <span class="rank-stats">架空历史 · 已完结</span>
              </div>
            </div>
            <div class="rank-item top-rank">
              <span class="rank-num third">3</span>
              <div class="rank-info">
                <h4>《大奉打更人》</h4>
                <p>卖报小郎君 著</p>
                <span class="rank-stats">玄幻 · 已完结</span>
              </div>
            </div>
            <div class="rank-item">
              <span class="rank-num">4</span>
              <div class="rank-info">
                <h4>《诡秘之主》</h4>
                <p>爱潜水的乌贼 著</p>
                <span class="rank-stats">奇幻 · 已完结</span>
              </div>
            </div>
            <div class="rank-item">
              <span class="rank-num">5</span>
              <div class="rank-info">
                <h4>《完美世界》</h4>
                <p>辰东 著</p>
                <span class="rank-stats">玄幻 · 已完结</span>
              </div>
            </div>
            <div class="rank-item">
              <span class="rank-num">6</span>
              <div class="rank-info">
                <h4>《圣墟》</h4>
                <p>辰东 著</p>
                <span class="rank-stats">玄幻 · 已完结</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 新书榜单 -->
        <div class="rank-section">
          <div class="section-header">
            <h3>新书榜单</h3>
          </div>
          <div class="rank-list">
            <div class="rank-item" v-for="i in 6" :key="i+10">
              <span class="rank-num">{{ i }}</span>
              <div class="rank-info">
                <h4>新书推荐{{ i }}</h4>
                <p>作者{{ i }} 著</p>
                <span class="rank-stats">玄幻 · 连载中</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 右侧区域 - 分类导航和热门活动 -->
      <div class="right-panel">
        <!-- 分类导航 -->
        <div class="category-nav">
          <div class="section-header">
            <h3>小说分类</h3>
          </div>
          <div class="category-grid">
            <a href="#" class="category-item">玄幻</a>
            <a href="#" class="category-item">修真</a>
            <a href="#" class="category-item">都市</a>
            <a href="#" class="category-item">言情</a>
            <a href="#" class="category-item">历史</a>
            <a href="#" class="category-item">科幻</a>
            <a href="#" class="category-item">游戏</a>
            <a href="#" class="category-item">悬疑</a>
            <a href="#" class="category-item">恐怖</a>
            <a href="#" class="category-item">军事</a>
            <a href="#" class="category-item">武侠</a>
            <a href="#" class="category-item">奇幻</a>
          </div>
        </div>
        
        <!-- 热门活动 -->
        <div class="activity-section">
          <div class="section-header">
            <h3>热门活动</h3>
          </div>
          <div class="activity-list">
            <div class="activity-item">
              <img src="https://picsum.photos/id/10/300/150" alt="活动图片" />
              <h4>作家福利升级</h4>
              <p>新作者扶持计划上线</p>
            </div>
            <div class="activity-item">
              <img src="https://picsum.photos/id/20/300/150" alt="活动图片" />
              <h4>阅读抽奖</h4>
              <p>每日阅读抽大奖</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'
import { ref } from 'vue'

export default {
  name: 'HomeView',
  setup() {
    const router = useRouter()
    
    // 当前选中的标签
    const currentMainTab = ref('男生')
    const currentFunctionTab = ref('全部作品')
    
    // 处理主标签点击
    const handleMainTabClick = (tab) => {
      currentMainTab.value = tab
      router.push({
        path: '/category',
        query: {
          main: tab,
          function: currentFunctionTab.value
        }
      })
    }
    
    // 处理功能标签点击
    const handleFunctionTabClick = (tab) => {
      currentFunctionTab.value = tab
      router.push({
        path: '/category',
        query: {
          main: currentMainTab.value,
          function: tab
        }
      })
    }
    
    return {
      currentMainTab,
      currentFunctionTab,
      handleMainTabClick,
      handleFunctionTabClick
    }
  }
}
</script>

<style scoped>
/* 首页样式 */
.qidian-home {
  padding: 0;
  max-width: 1200px;
  margin: 0 auto;
}

/* 主标签导航样式 */
.main-tabs {
  background-color: #fff;
  border-bottom: 2px solid #e81742;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tabs-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  padding: 0 20px;
}

.main-tab {
  display: inline-block;
  padding: 18px 30px;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  text-decoration: none;
  position: relative;
  transition: all 0.3s;
  background: none;
  border: none;
  cursor: pointer;
}

.main-tab:hover {
  color: #e81742;
}

.main-tab.active {
  color: #e81742;
  font-weight: 600;
}

.main-tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #e81742;
}

/* 功能标签导航样式 */
.function-tabs {
  background-color: #f8f8f8;
  padding: 10px 0;
  border-bottom: 1px solid #e0e0e0;
}

.function-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  padding: 0 20px;
  gap: 20px;
  overflow-x: auto;
}

.function-tab {
  display: inline-block;
  padding: 6px 16px;
  font-size: 14px;
  color: #666;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 16px;
  transition: all 0.3s;
  background: none;
  border: none;
  cursor: pointer;
}

.function-tab:hover {
  color: #e81742;
  background-color: #f0f0f0;
}

.function-tab.active {
  color: #fff;
  background-color: #e81742;
}

/* 左侧导航样式 */
.left-sidebar {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.secondary-nav {
  /* 导航容器样式 */
}

.nav-group {
  margin-bottom: 20px;
}

.nav-group:last-child {
  margin-bottom: 0;
}

.nav-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.nav-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.nav-item {
  display: block;
  padding: 8px 12px;
  font-size: 14px;
  color: #666;
  text-decoration: none;
  text-align: center;
  border-radius: 4px;
  transition: all 0.3s;
}

.nav-item:hover {
  color: #e81742;
  background-color: #f8f8f8;
}

.nav-item.active {
  color: #e81742;
  font-weight: 500;
  background-color: #ffebee;
}

/* 调整内容区域边距 */
.qidian-home > .banner {
  margin-top: 0;
}

.qidian-home > .content-container {
  padding: 20px;
}

/* 轮播图样式 */
.banner {
  width: 100%;
  height: 400px;
  overflow: hidden;
  position: relative;
  margin-bottom: 30px;
}

.banner-content {
  position: relative;
  width: 100%;
  height: 100%;
}

.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 20px;
}

.banner-text h2 {
  margin: 0;
  font-size: 24px;
  font-weight: bold;
}

.read-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 20px;
  background-color: #e81742;
  color: #fff;
  border-radius: 4px;
  font-weight: 500;
  text-decoration: none;
}

/* 内容容器 */
.content-container {
  display: flex;
  gap: 20px;
}

.left-panel {
  flex: 2;
}

.right-panel {
  flex: 1;
}

/* 榜单样式 */
.rank-section {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  padding-bottom: 10px;
  border-bottom: 2px solid #e81742;
}

.rank-list {
  margin-top: 15px;
}

.rank-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.rank-item:last-child {
  border-bottom: none;
}

.rank-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-right: 15px;
  font-size: 16px;
  font-weight: bold;
  color: #999;
}

.rank-num.first {
  background-color: #ff6b6b;
  color: #fff;
  border-radius: 50%;
}

.rank-num.second {
  background-color: #ffd166;
  color: #fff;
  border-radius: 50%;
}

.rank-num.third {
  background-color: #06d6a0;
  color: #fff;
  border-radius: 50%;
}

.rank-info h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.rank-info p {
  margin: 2px 0;
  font-size: 14px;
  color: #999;
}

.rank-stats {
  font-size: 12px;
  color: #666;
}

/* 分类导航 */
.category-nav {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 15px;
}

.category-item {
  padding: 10px 15px;
  background-color: #f8f8f8;
  border-radius: 4px;
  text-align: center;
  color: #333;
  font-size: 14px;
  transition: all 0.3s;
  text-decoration: none;
}

.category-item:hover {
  background-color: #e81742;
  color: #fff;
}

/* 活动区域 */
.activity-section {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.activity-list {
  margin-top: 15px;
}

.activity-item {
  margin-bottom: 15px;
}

.activity-item:last-child {
  margin-bottom: 0;
}

.activity-item img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.activity-item h4 {
  margin: 10px 0 5px 0;
  font-size: 16px;
  font-weight: 500;
}

.activity-item p {
  margin: 0;
  font-size: 14px;
  color: #999;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .content-container {
    flex-direction: column;
  }
  
  .banner {
    height: 200px;
  }
  
  .banner-text h2 {
    font-size: 18px;
  }
  
  .read-btn {
    padding: 6px 15px;
    font-size: 14px;
  }
}
</style>
